.SecurityNewDetails {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	overflow-y: scroll;
	max-height: 80vh;

	& > .mainTable {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;

		& > div {
			flex: 1;

			&.Image {
				width: 100%;
				overflow: hidden;
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				flex-wrap: wrap;

				& > .ant-image {
					width: 30%;
					aspect-ratio: 1/1;
					overflow: hidden;
					margin: 5px;

					& > img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}

			&.ImageArr {
				width: 100%;
				overflow: hidden;

				& > div {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					flex-wrap: wrap;

					& > div {
						width: 30%;
						aspect-ratio: 1/1;
						overflow: hidden;
						font-family: PingFang;
						font-weight: 400;
						font-size: 18px;
						color: #082400;
						margin: 5px;
						display: flex;
						align-items: center;
						justify-content: center;

						& > img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
		}
	}

	.Label {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 4px;

		& > div:first-child {
			width: 120px;
			text-align: right;
			margin-right: 8px;
			font-family: PingFang;
			font-weight: 400;
			font-size: 18px;
			color: #082400;
		}

		& > div:last-child {
			flex: 1;
			font-family: PingFang;
			font-weight: 600;
			font-size: 18px;
			color: #082400;
		}
	}
}

.WeChatOfficialModel {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	& > img {
		width: 156px;
		height: 156px;
		margin-bottom: 16px;
	}

	& > div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 14px;
		color: #082400;
	}
}

.WeChatBindBox {
	width: 100%;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	& > #QRcode {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}

.Enclosure {
	width: 100%;
	height: 90vh;
	overflow: hidden;

	& > img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	& > embed {
		width: 100%;
		height: 100%;
	}
}

.FlvVideoBox {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 6px;
}

.codeBox {
	width: 100%;
	padding: 15px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	z-index: 1;
	overflow: hidden;

	& > div:nth-child(2) {
		padding-top: 10px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	& > .MarkBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
}

.OpenExcel {
	width: 100%;
	height: 92vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	& > div {
		width: 100%;

		&:first-child {
			height: calc(100% - 72px);
			margin-bottom: 16px;
		}

		&:last-child {
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > button {
				margin: 0 16px;
			}
		}
	}
}

.MonitorVideo {
	width: 100%;
	height: 60vh;
	overflow-x: scroll;

	& > .SeeLabVideoModalScroll {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		& > div {
			width: 800px;
			height: 100%;
			margin-right: 16px;
		}
	}
}

.OrdinaryQRCode {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.RichTextEditor {
	width: 100%;
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.tox {
		width: 100%;
		flex: 1;
		margin-bottom: 16px;
	}
}

.AnnexMore {
	& > div {
		line-height: 40px;
		cursor: pointer;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #262626;
		font-weight: bold;
	}
}

.ZLVideoModal {
	width: 100%;

	& > #cmsv6flash {
		width: 952px;
		height: 600px;
	}

	& > .Button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;

		& > button {
			width: 200px;
		}
	}
}

.MonitoringModal {
	height: 80vh;
}

.PersonFiles {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.ant-tabs-tab-btn {
		white-space: pre;
	}

	& > .base {
		width: 100%;
		height: 200px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			object-fit: contain;
			display: block;
			margin-right: 16px;
		}

		& > .info {
			flex: 1;
			height: 100%;
			overflow-y: scroll;

			& > .ant-descriptions {
				background: transparent;

				.ant-descriptions-item {
					padding-bottom: 4px;
				}
			}

			// &::-webkit-scrollbar {
			// 	display: none;
			// }
		}
	}

	& > .list {
		width: 100%;

		& > .details {
			height: 400px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				height: 100%;
			}

			& > .rightList {
				flex: 1;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				flex-direction: column;
				overflow: hidden;

				& > div {
					width: 100%;

					&.Add {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding: 8px 0;
					}

					&.AnnexTemplate {
						flex: 1;
						overflow-y: scroll;

						&::-webkit-scrollbar {
							display: none;
						}

						& > .AnnexList {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 44px;
							padding: 0 8px;
							margin: 4px 0;
							border-bottom: 1px solid #ccc;

							& > div {
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}
}

.UrlQRCode {
	& > img {
		width: 100%;
		height: 100%;
		margin-bottom: 16px;
	}

	& > div {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.SciencesDetails {
	width: 100%;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;

	& > div {
		width: 100%;

		.ant-descriptions-item {
			padding: 8px;
		}

		&.Details {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				padding: 8px;
				height: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: column;

				&:first-child {
					position: relative;

					&::after {
						position: absolute;
						content: "";
						right: 0;
						top: 16px;
						bottom: 16px;
						width: 1px;
						background: linear-gradient(
							0deg,
							rgba(0, 0, 0, 0),
							rgba(0, 0, 0, 0.35),
							rgba(0, 0, 0, 0)
						);
					}
				}

				&.Annex {
					width: 400px;
				}

				&.Flow {
					flex: 1;
				}

				& > .Item {
					flex: 1;
					width: 100%;
					overflow-y: scroll;

					&::-webkit-scrollbar {
						display: none;
					}

					& > .Annexitem {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #e8e8e8;
						height: 40px;
						padding: 0 16px;

						& > div:first-child {
							flex: 1;
							height: 100%;
							overflow: hidden;
							margin-right: 16px;
							cursor: pointer;
						}

						& > div:last-child {
							width: 50px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				& > .Title {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8px;

					& > div:first-child {
						font-size: 20px;
						font-family: ShuHeiTi;
						font-weight: bold;
					}
				}
			}
		}
	}
}

.PrintQRcodeList {
	width: 100%;
	max-height: 600px;
	overflow-y: scroll;

	&::-webkit-scrollbar {
		display: none;
	}

	.ant-list-item {
		& > div {
			flex: 1;
			cursor: pointer;
		}

		& > button {
			margin: 0 4px;
		}
	}

	.MarkBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
}

.AnonymousSecurityAnnex {
	width: 100%;
	max-height: 600px;
	overflow-y: scroll;

	.ImageList {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		& > img {
			width: 440px;
			aspect-ratio: 1/1;
			margin-bottom: 16px;
			object-fit: cover;
		}
	}
}

.EventListStatusModel {
	width: 100%;
	height: 100%;

	& > div:first-child {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;

		& > div {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 100%;
			margin-right: 16px;

			&:last-child {
				margin: 0;
			}

			& > div:first-child {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 14px;
				color: #444444;
				margin-right: 4px;
				line-height: 32px;
			}

			& > div:last-child {
				flex: 1;

				& > * {
					width: 100%;
				}
			}
		}
	}

	& > div:nth-child(2) {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		margin-bottom: 8px;

		& > div:first-child {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 14px;
			color: #444444;
			margin-right: 4px;
			line-height: 32px;
		}

		& > div:last-child {
			flex: 1;

			& > * {
				width: 100%;
			}
		}
	}

	& > div:last-child {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
